<template>
    <div class="m-admin-admin-add">
        <div class="row-content am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">添加角色</div>
                        </div>
                        <div>
                            <el-form
                                :model="ruleForm"
                                :rules="rules"
                                ref="ruleForm"
                                label-width="100px"
                                class="demo-ruleForm"
                            >
                                <el-form-item label="角色名称" prop="role_name">
                                    <el-input v-model="ruleForm.role_name"></el-input>
                                </el-form-item>
                                <el-form-item label="角色编码" prop="role_code">
                                    <el-input v-model="ruleForm.role_code"></el-input>
                                </el-form-item>
                                <el-form-item label="菜单" prop="role_menus">
                                    <el-select
                                        v-model="ruleForm.role_menus"
                                        multiple
                                        collapse-tags
                                        placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="item in menuList"
                                            :key="item.menu_id"
                                            :label="item.menu_name"
                                            :value="item.menu_id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
                                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { add as roleAdd, info as roleInfo } from '../../api/admin/role.js';

export default {
    name: 'adminInfo',
    components: {
    },
    data () {
        return {
            ruleForm: {
                role_id: '',
                role_code: '',
                role_name: '',
                role_menus: []
            },
            menuList: [
                {menu_id: 1, menu_name: '首页'},
                {menu_id: 2, menu_name: '首页2'},
                {menu_id: 3, menu_name: '首页3'}
            ],
            rules: {
                role_code: [
                    { required: true, message: '请输入角色编码', trigger: 'blur' }
                ],
                role_name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ],
                role_menus: [
                    { 
                        validator: (rule, value, callback) => {
                            if (value.length > 0) {
                                callback();
                            } else {
                                callback(new Error('请选择菜单'));
                            }
                        },
                        trigger: 'blur' 
                    }
                ]
            }
        }
    },
    mounted () {
        this.$route.query.role_id && (this.ruleForm.role_id = this.$route.query.role_id);
        //
        if (this.ruleForm.role_id) {
            this.getInfo();
        }
    },
    methods: {
        //  取详情
        getInfo () {
            roleInfo(this.ruleForm).then(res => {
                if (res.errno === 0) {
                    this.ruleForm = Object.assign({}, this.ruleForm, res.data);
                }
            });
        },
        add () {
            roleAdd(this.ruleForm).then(res => {
                if (res.errno === 0) {
                    this.$message({
                        type: 'success',
                        message: res.errmsg || '添加成功'
                    });
                } else {
                    this.$message({
                        type: 'info',
                        message: res.errmsg || '添加失败'
                    });  
                }
            });
        },
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.add();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm (formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.m-home {
    .page-home .widget-card .card-icon {
        top: 40px;
    }
}
</style>
